<!-- 
	动态组件：搜索框
	props: 
		data: 组件数据
			searchHot: "234"
			searchInputRadius: "square"
			searchInputTextAlign: "left"
			searchStyle: "1"
			searcnBlockBg: "rgb(0, 255, 0)"
			searcnBtnColor: ""
			searcnInputBg: ""
			searcnInputBorder: "rgb(153, 0, 255)"
			searcnInputColor: "rgb(249, 203, 124)"
	action:
		doSearchFn:键盘触发搜索
		searchFn:提交搜索
		goSearch:前往搜索页面（按钮模式下）
 -->
<template>
    <view>
        <view
            class="dynamic-search-bar"
            :class="{ mixStyle: isMixSearchBanner }"
            :style="{ backgroundColor: !isMixSearchBanner && data.SearcnBlockBg ? data.SearcnBlockBg : '' }">
            <view
                class="dynamic-search-side"
                v-if="data.SearchLinkLeft[0].Link && data.SearchLinkLeft[0].Link == '/location/index'"
                @click="areaSelectFn">
                <view class="dynamic-search-item pl-24">
                    <image
                        v-if="data.SearchLinkLeft[0].Icon && data.SearchLinkLeft[0].Icon.includes('http')"
                        class="icon-image"
                        :src="data.SearchLinkLeft[0].Icon"></image>
                    <view v-else>
                        <dynamic-iconsfont
                            size="47"
                            :loseMargin="true"
                            color="#fff"
                            :customIcons="
                                data.SearchLinkLeft[0].Icon ? data.SearchLinkLeft[0].Icon : 'icon-default'
                            "></dynamic-iconsfont>
                    </view>
                    <view class="titelname">{{ streetName }}</view>
                </view>
            </view>
            <view
                class="dynamic-search-side"
                v-if="
                    data.SearchLinkLeft[0].Link &&
                    data.SearchLinkLeft[0].Link == '/warehouse/index' &&
                    webInfo.IsSelectWarehouse == 1
                "
                @click="warehouseListFn">
                <view class="dynamic-search-item pl-24">
                    <image
                        v-if="data.SearchLinkLeft[0].Icon && data.SearchLinkLeft[0].Icon.includes('http')"
                        class="icon-image"
                        :src="data.SearchLinkLeft[0].Icon"></image>
                    <view v-else>
                        <dynamic-iconsfont
                            size="47"
                            :loseMargin="true"
                            color="#fff"
                            :customIcons="
                                data.SearchLinkLeft[0].Icon ? data.SearchLinkLeft[0].Icon : 'icon-default'
                            "></dynamic-iconsfont>
                    </view>
                    <view class="titelname">{{ WarehouseName ? WarehouseName : data.SearchLinkLeft[0].Title }}</view>
                </view>
            </view>
            <view
                class="dynamic-search-side"
                v-if="
                    data.SearchLinkLeft[0].Title &&
                    data.SearchLinkLeft[0].Title != '客服' &&
                    data.SearchLinkLeft[0].Link != '/location/index' &&
                    data.SearchLinkLeft[0].Link != '/warehouse/index'
                "
                @click="goTo(data.SearchLinkLeft[0].Link)">
                <view class="dynamic-search-item pl-24">
                    <image
                        v-if="data.SearchLinkLeft[0].Icon && data.SearchLinkLeft[0].Icon.includes('http')"
                        class="icon-image"
                        :src="data.SearchLinkLeft[0].Icon"></image>
                    <view v-else>
                        <dynamic-iconsfont
                            size="47"
                            :loseMargin="true"
                            color="#fff"
                            :customIcons="
                                data.SearchLinkLeft[0].Icon ? data.SearchLinkLeft[0].Icon : 'icon-default'
                            "></dynamic-iconsfont>
                    </view>
                    <view class="titelname">{{ data.SearchLinkLeft[0].Title }}</view>
                </view>
            </view>
            <view
                class="dynamic-search-side"
                v-if="
                    data.SearchLinkLeft[0].Title &&
                    data.SearchLinkLeft[0].Title == '客服' &&
                    data.SearchLinkLeft[0].Link != '/location/index' &&
                    data.SearchLinkLeft[0].Link != '/warehouse/index'
                ">
                <view class="dynamic-search-item pl-24" @click="call">
                    <image
                        v-if="data.SearchLinkLeft[0].Icon && data.SearchLinkLeft[0].Icon.includes('http')"
                        class="icon-image"
                        :src="data.SearchLinkLeft[0].Icon"></image>
                    <view v-else>
                        <dynamic-iconsfont
                            size="47"
                            :loseMargin="true"
                            color="#fff"
                            :customIcons="
                                data.SearchLinkLeft[0].Icon ? data.SearchLinkLeft[0].Icon : 'icon-default'
                            "></dynamic-iconsfont>
                    </view>
                    <view class="titelname">{{ data.SearchLinkLeft[0].Title }}</view>
                </view>
            </view>
            <view
                class="dynamic-search-bar-box"
                :style="{ backgroundColor: !isMixSearchBanner && data.SearcnBlockBg ? data.SearcnBlockBg : '' }">
                <view class="dynamic-search-bar-btn btn-left" v-if="isMixSearchBanner" @click="clickLeftFn">
                    <iconsfont class="icon-text" color="#ffffff" :customIcons="'icon-fenlei11'"></iconsfont>
                    <text class="btn-text">分类</text>
                </view>
                <view
                    class="dynamic-search-bar-main"
                    :class="{ 'circle-style': data.SearchInputRadius != 'square' }"
                    :style="{
                        backgroundColor: data.SearcnInputBg ? data.SearcnInputBg : '',
                        borderColor: data.SearcnInputBorder ? data.SearcnInputBorder : '',
                    }">
                    <image class="icon-search" :src="getIconSearch()"></image>
                    <text
                        v-if="!data.IsButton"
                        class="input-style"
                        :style="{
                            justifyContent: data.SearchInputTextAlign ? data.SearchInputTextAlign : 'left',
                            color: '#aaaaaa',
                        }"
                        @click="goSearch">
                        {{ data.SearchHot ? data.SearchHot : "请输入关键词" }}
                    </text>
                    <input
                        v-else
                        class="input-style"
                        :placeholder="data.SearchHot ? data.SearchHot : '请输入关键词'"
                        :style="{
                            textAlign: data.SearchInputTextAlign ? data.SearchInputTextAlign : 'left',
                            color: data.SearcnInputColor ? data.SearcnInputColor : '',
                        }"
                        v-model="value"
                        confirm-type="search"
                        @confirm="doSearchFn" />
                </view>
                <view class="dynamic-search-bar-btn btn-right" v-if="isMixSearchBanner" @click="clickRightFn">
                    <iconsfont class="icon-text" color="#ffffff" :customIcons="'icon-kefu'"></iconsfont>
                    <text class="btn-text">客服</text>
                </view>
            </view>
            <view
                class="dynamic-search-side"
                v-if="data.SearchLinkRigft[0].Title && data.SearchLinkRigft[0].Title != '客服'"
                @click="goTo(data.SearchLinkRigft[0].Link)">
                <view class="dynamic-search-item pr-24">
                    <image
                        v-if="data.SearchLinkRigft[0].Icon && data.SearchLinkRigft[0].Icon.includes('http')"
                        class="icon-image"
                        :src="data.SearchLinkRigft[0].Icon"></image>
                    <view v-else>
                        <dynamic-iconsfont
                            size="47"
                            :loseMargin="true"
                            color="#fff"
                            :customIcons="
                                data.SearchLinkRigft[0].Icon ? data.SearchLinkRigft[0].Icon : 'icon-default'
                            "></dynamic-iconsfont>
                    </view>
                    <view class="titelname">{{ data.SearchLinkRigft[0].Title }}</view>
                </view>
            </view>
            <view
                class="dynamic-search-side"
                v-if="data.SearchLinkRigft[0].Title && data.SearchLinkRigft[0].Title == '客服'">
                <view class="dynamic-search-item pr-24" @click="call">
                    <image
                        v-if="data.SearchLinkRigft[0].Icon && data.SearchLinkRigft[0].Icon.includes('http')"
                        class="icon-image"
                        :src="data.SearchLinkRigft[0].Icon"></image>
                    <view v-else>
                        <dynamic-iconsfont
                            size="47"
                            :loseMargin="true"
                            color="#fff"
                            :customIcons="
                                data.SearchLinkRigft[0].Icon ? data.SearchLinkRigft[0].Icon : 'icon-default'
                            "></dynamic-iconsfont>
                    </view>
                    <view class="titelname">{{ data.SearchLinkRigft[0].Title }}</view>
                </view>
            </view>
        </view>
        <view
            class="pure_top"
            :style="{
                backgroundColor:
                    !isMixSearchBanner && data.SearcnBlockBg && data.Searchbgshow == 'open' ? data.SearcnBlockBg : '',
            }"></view>
    </view>
</template>

<script>
import storage from "@/uni-sub-base/utils/storage.js"
import dynamicIconsfont from "./dynamic-iconsfont.vue"
import iconSearch from "./icon/icon_search.png"
export default {
    components: {
        dynamicIconsfont,
    },
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        isMixSearchBanner: {
            type: Boolean,
            default: false,
        },
        streetName: {
            type: String,
            default: "",
        },
        WarehouseName: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            value: "",
            webInfo: {},
            warehouse: {},
        }
    },
    mounted() {
        this.webInfo = storage.getCache("webInfo")
        this.warehouse = storage.getCache("warehouse")
        this.$emit("loadBack", this.data.index)
    },
    methods: {
        doSearchFn() {
            this.searchFn()
        },
        searchFn() {
            //搜索
            let key = this.value
            if (key && key.length) {
                key = key.trim()
            } else {
                key = ""
            }
            this.$emit("searchFn", key)
        },
        goSearch() {
            this.$emit("goSearch", "")
        },
        getIconSearch() {
            return iconSearch
        },
        clickLeftFn() {
            this.$emit("clickLeftFn", "")
        },
        clickRightFn() {
            this.$emit("clickRightFn", "")
        },
        areaSelectFn() {
            this.$emit("areaSelectFn", "")
        },
        warehouseListFn() {
            this.$emit("warehouseListFn", "")
        },
        goTo(item) {
            this.$emit("goTo", item)
        },
        call() {
            uni.makePhoneCall({
                phoneNumber: this.webInfo.ServiceTel,
            })
        },
    },
}
</script>

<style lang="scss" scope>
@import "@/uni-sub-base/components/dynamic/style/dynamic.scss";

.dynamic-search-bar {
    display: flex;
}
.pl-24 {
    padding-left: 24rpx;
}
.pr-24 {
    padding-right: 24rpx;
}
.dynamic-search-side {
    .dynamic-search-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        .titelname {
            max-width: 95rpx;
            white-space: nowrap;
            font-size: 24rpx;
            color: #fff;
        }
    }
    image {
        width: 47rpx;
        height: 47rpx;
    }
}
.dynamic-search-bar-box {
    flex: 1;
    padding: 18rpx $dy-padding-default;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    .dynamic-search-bar-main {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        border: solid 1rpx;
        padding: 16rpx 12rpx;
        border-radius: 8rpx;
        background: #ffffff;
        border-color: #f2f2f2;
        .icon-search {
            width: 36rpx;
            height: 36rpx;
            margin-right: 12rpx;
        }
        .input-style {
            display: flex;
            flex: 1;
            font-size: 28rpx;
            color: #333333;
        }
    }
    .circle-style {
        border-radius: 100rpx;
    }
}
.mixStyle {
    .dynamic-search-bar-box {
        background: $app-color-main;
    }
}
.dynamic-search-bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 120rpx;
    overflow: hidden;
    justify-content: center;
    .icon-text {
        margin-bottom: 4rpx;
    }
    .btn-text {
        justify-content: center;
        width: 100%;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.btn-left {
    padding-right: 30rpx;
}
.btn-right {
    padding-left: 30rpx;
}
.pure_top {
    height: 240rpx;
    margin-bottom: -240rpx;
    border-radius: 0 0 20% 20%;
}
</style>
